<template>
  <back-dialog-base
    :title="title"
    :visible="visibleDialog"
    :hasFooter="false"
    width="15rem"
  >
    <template #content>
      <div class="content-warp">
        <div class="title-box">
          <span>发布内容：{{ name }}</span>
          <span>内容类型：{{ contentType }}</span>
        </div>
        <div class="progress-warp">
          <progress-item
            v-for="(item, index) in datas"
            :key="item.screenCode + index"
            :index="index + 1"
            :code="item.screenCode"
            :percentage="50 - index * 10 > 0 ? 50 - index * 10 : 0"
            :offset="5"
            :closeType="closeType"
          ></progress-item>
        </div>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { defineProps, watch, ref, defineEmits } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import ProgressItem from './progressItem.vue'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleDialog: {
    type: Boolean,
    default: false
  },
  name: {
    type: String,
    default: ''
  },
  contentType: {
    type: String,
    default: ''
  },
  datas: {
    type: Array,
    default: () => []
  },
  isClose: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['closeOther'])
const closeType = ref(false)
watch(
  () => props.isClose,
  () => {
    closeType.value = props.isClose
    if (props.isClose) {
      emits('closeOther')
    }
  }
)
</script>

<style lang="scss" scoped>
.content-warp {
  width: 100%;
  height: 100%;
  .title-box {
    width: 100%;
    height: 19px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    line-height: 19px;
    color: #333333;
    display: flex;
    column-gap: 40px;
    margin-bottom: 25px;
  }
  .progress-warp {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
  }
}
</style>
